<template>
	<view class="tabBar">
		<view class="tab-item" v-for="(item, index) in list" @click="toggle(index)">
			<image v-if="active == index" :src="'/'+item.selectedIconPath" mode=""></image>
			<image v-else :src="'/'+item.iconPath" mode=""></image>
			<text :class="active == index?'on':''">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				list: [
					{
						"pagePath": "pages/more/more",
						"text": this.$t('gdjj.hdj'),
						"selectedIconPath": "static/tabbar/1.png",
						"iconPath": "static/tabbar/11.png"
					},
					// {
					// 	"pagePath": "pages/social/social",
					// 	// "text": this.$t('index.sjzx'),
					// 	"selectedIconPath": "static/tabbar/2.png",
					// 	"iconPath": "static/tabbar/21.png"
					// },
					{
						"pagePath": "pages/index/index",
						"text": this.$t('index.sy'),
						"selectedIconPath": "static/tabbar/3.png",
						"iconPath": "static/tabbar/31.png"
					},
					{
						"pagePath": "pages/privacy/privacy",
						"text": this.$t('index.smkj'),
						"selectedIconPath": "static/tabbar/4.png",
						"iconPath": "static/tabbar/41.png"
					}, 
					{
						"pagePath": "pages/my/my",
						"text": this.$t('index.grzx'),
						"selectedIconPath": "static/tabbar/5.png",
						"iconPath": "static/tabbar/51.png"
					},
				]
			};
		},
		mounted() {
			this.active = this.$tools.getStore('active');
		},
		methods: {
			toggle(index){
				this.$music.play_click_2()
				this.$tools.setStore('active', index);
				uni.redirectTo({
					url:'/'+this.list[index].pagePath
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabBar{
		height: 150rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #101722;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		.tab-item{
			width: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			image{
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 10rpx;
			}
			text{
				font-size: 20rpx;
				color: #656565;
				&.on{
					color: #fff;
				}
			}
		}
	}
</style>